<template>
    <div>
        <el-table v-if="department_user_list" :header-cell-style="getRowClass" style="width: 100%" :data="department_user_list.td" border @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="40"></el-table-column>
            <el-table-column v-for="(item, index) in department_user_list.th" :key="index" :label="item.label" :prop="item.key"></el-table-column>
        </el-table>
        <el-pagination v-if="department_user_list" @current-change="handleCurrentChange" background :current-page="1" :page-size="5" prev-text="上一页" next-text="下一页" layout="total, prev, pager, next, jumper" :total="department_user_list.total"></el-pagination>
    </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
    name: "department-table",
    computed: {
        ...mapGetters("department1", ["department_user_list"])
    },
    methods: {
        handleCurrentChange(val) {
            this.$store.dispatch('department1/getDepartmentUserList', {pageNumber: val})
        },
        handleSelectionChange(arr) {
            let new_arr = []
            for(let i = 0, len = arr.length; i < len; i++) {
                new_arr.push(arr[i].id)
            }
            this.$store.commit('department1/CHANGE_WAIT_DEL_DEPARTMENT_USER_LIST', new_arr)
            new_arr = null;
        },
        getRowClass({ row, column, rowIndex, colIndex }) {
            if (column.property === "num") {
                column.width = 55;
                return "background:#f5f7f9";
            } else if (column.property === "mobile") {
                column.width = 120;
                return "background:#f5f7f9";
            } else if (column.property === "role") {
                column.width = 250;
                return "background:#f5f7f9";
            }
            if (rowIndex === 0) {
                return "background:#f5f7f9";
            }
        }
    }
};
</script>

<style>
</style>
